import { CheckIcon, WarningIcon } from '@chakra-ui/icons';
import { Badge, Spinner, Text } from '@chakra-ui/react';

export type ModelTrainingStatus = 'done' | 'processing' | 'error';
export const STATUS_MAP: { [k: string]: ModelTrainingStatus } = {
  '1': 'processing',
  '2': 'done',
  '3': 'error',
};
const status_SX = {
  display: 'inline-flex',
  justifyContent: 'center',
  alignItems: 'center',
};

export default function ModelStatus(props: {
  status: ModelTrainingStatus;
  remainTime?: number;
}) {
  const { status, remainTime } = props;
  if (status === 'done') {
    return (
      <Text textAlign="right" fontWeight="bold" verticalAlign="middle" as="div">
        <Badge
          as="div"
          sx={status_SX}
          rounded="full"
          px="2"
          fontSize="0.8em"
          colorScheme="green"
        >
          <CheckIcon mr="2" />
          训练完成
        </Badge>
      </Text>
    );
  }
  if (status === 'error') {
    return (
      <Text textAlign="right" fontWeight="bold" as="div">
        <Badge
          as="div"
          sx={status_SX}
          rounded="full"
          px="2"
          fontSize="0.8em"
          colorScheme="red"
        >
          <WarningIcon mr="2" />
          {status}
        </Badge>
      </Text>
    );
  }
  if (status === 'processing') {
    return (
      <Text textAlign="right" fontWeight="bold" as="div">
        <Badge
          as="div"
          sx={status_SX}
          rounded="full"
          px="2"
          fontSize="0.8em"
          colorScheme="blue"
        >
          <Spinner speed="0.8s" size="xs" mr="2" />
          {/* {status} */}
          训练中 预计剩余{remainTime}分钟
        </Badge>
      </Text>
    );
  }
  return null;
}
